<template>
    <div class="menus">
      <div v-for="item in menuItems" :key="item" class="menu-item">
        <span>{{ item }}</span>
      </div>
    </div>
    <div class="sort-and-search">
      <div class="sort-icon">
        <el-image :src="up" @click="sortByCharacter()" ></el-image>
      </div>
      <div>
        <el-image :src="numUp" @click="sortByPriceIncreaseAES()" ></el-image>
      </div>
      <div>
        <el-image :src="numDwn " @click="sortByPriceIncreaseDESC()" ></el-image>
      </div>
      <div class="search-input">
        <el-input
            v-model="input"
            size="small"
            placeholder="货币名称"
            :prefix-icon="Search"
        />
        <el-button type="success" class="search-button" size="small">查询</el-button>
      </div>
    </div>
    <!--  列表  -->
  <div class="list">
    <el-descriptions
        direction="vertical"
        :column="6"
        border
        :label-width="200"
        v-for="data in filteredCoinList" :key="data.id"
    >
      <el-descriptions-item label="币种图标">
        <el-image :src="require('@/assets/coinlist/'+data.icon)"></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="币种" >
        {{ data.name }}
      </el-descriptions-item>
      <el-descriptions-item label="交易量">
        ${{ data.total }}
      </el-descriptions-item>
      <el-descriptions-item label="价格(CNY)">
        ￥{{ data.rmbPrice }}
      </el-descriptions-item>
      <el-descriptions-item label="价格(USD)">
        {{ data.usdtPrice }}
      </el-descriptions-item>
      <el-descriptions-item label="涨跌幅">
        <span :class="{
    'price-increase': data.priceIncrease.startsWith('+'),
    'price-decrease': data.priceIncrease.startsWith('-')
  }">{{ data.priceIncrease }}%</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import up from '@/assets/coinlist/sort-alpha-up-alt.svg'
import numUp from '@/assets/coinlist/sort-numeric-up-alt.svg'
import numDwn from '@/assets/coinlist/sort-numeric-down-alt.svg'
import {Search} from "@element-plus/icons-vue";
import {computed, ref} from 'vue'

const input = ref('');
const menuItems = ['涨幅榜', '现货', '合约', 'ETF', '借贷'];
/*列表数据*/
/*货币数据来源*/
const dataList =ref([
  {
    "id": 1001,
    "name": "BCT",
    "usdtPrice": 69999,
    "rmbPrice": 500000,
    "total": 300,
    "priceIncrease": "+10.86",
    "icon": "btc.png"
  },
  {
    "id": 1002,
    "name": "ETH",
    "usdtPrice": 4400,
    "rmbPrice": 30000,
    "total": 168,
    "priceIncrease": "+12.36",
    "icon": "eth.png"
  },
  {
    "id": 1003,
    "name": "GT",
    "usdtPrice": 4.4,
    "rmbPrice": 33,
    "total": 12.5,
    "priceIncrease": "+19.58",
    "icon": "gt.png"
  },
  {
    "id": 1004,
    "name": "XRP",
    "usdtPrice": 0.44,
    "rmbPrice": 3.33,
    "total": 68.6,
    "priceIncrease": "+33.22",
    "icon": "xrp.png"
  },
  {
    "id": 1005,
    "name": "STARL",
    "usdtPrice": 0.00044,
    "rmbPrice": 0.0033,
    "total": 6.68,
    "priceIncrease": "+88.88",
    "icon": "starl.png"
  },
  {
    "id": 1006,
    "name": "LOOM",
    "usdtPrice": 1.2,
    "rmbPrice": 9.33,
    "total": 0.68,
    "priceIncrease": "-10.88",
    "icon": "loom.png"
  },
  {
    "id": 1007,
    "name": "ASTRA",
    "usdtPrice": 2.2,
    "rmbPrice": 15.33,
    "total": 0.98,
    "priceIncrease": "-30.88",
    "icon": "astra.png"
  },
  {
    "id": 1008,
    "name": "WMS",
    "usdtPrice": 0.25,
    "rmbPrice": 1.75,
    "total": 3.68,
    "priceIncrease": "-36.88",
    "icon": "wsm.png"
  },
  {
    "id": 1009,
    "name": "AMS",
    "usdtPrice": 0.0025,
    "rmbPrice": 0.0175,
    "total": 0.98,
    "priceIncrease": "-16.88",
    "icon": "ams.png"
  },
  {
    "id": 1010,
    "name": "TOMI",
    "usdtPrice": 8.25,
    "rmbPrice": 55.175,
    "total": 10.98,
    "priceIncrease": "-06.88",
    "icon": "tomi.png"
  },
  {
    "id": 1011,
    "name": "VRA",
    "usdtPrice": 3.2,
    "rmbPrice": 22.14,
    "total": 0.98,
    "priceIncrease": "+66.88",
    "icon": "vra.png"
  },
  {
    "id": 1012,
    "name": "FLOKI",
    "usdtPrice": 0.0000032,
    "rmbPrice": 0.00002214,
    "total": 11.55,
    "priceIncrease": "-99.88",
    "icon": "floki.png"
  }
]);
const filteredCoinList = computed(() => {
  return dataList.value.filter(data =>
      data.name.includes(input.value)
  );
});
function sortByCharacter(){
  dataList.value.sort((a, b) => {
    if (a.name < b.name) {
      return -1;
    }
    if (a.name > b.name) {
      return 1;
    }
    return 0;
  });
}
function sortByPriceIncreaseAES() {
  dataList.value.sort((a, b) => {
    const valueA = parseFloat(a.priceIncrease);
    const valueB = parseFloat(b.priceIncrease);
    if (valueA < valueB) {
      return 1;
    }
    if (valueA > valueB) {
      return -1;
    }
    return 0;
  });
}
function sortByPriceIncreaseDESC() {
  dataList.value.sort((a, b) => {
    const valueA = parseFloat(a.priceIncrease);
    const valueB = parseFloat(b.priceIncrease);
    if (valueA < valueB) {
      return -1;
    }
    if (valueA > valueB) {
      return 1;
    }
    return 0;
  });

}
</script>

<style scoped>

.menus {
  width: 96%;
  height: 50px;
  background-color: #c696f5;
  display: flex;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
}

.menu-item {
  cursor: pointer;
  padding: 0 10px;
}

.menu-item span {
  font-size: 16px;
  color: #fff;
}

.sort-and-search {
  height: 100px;
  background-color: #409EFF;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
}

.sort-icon {
  width: 24px;
  height: 24px;
}


.search-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-input__inner {
  height: 40px;
  font-size: 14px;
}

.search-button {
  margin-left: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

/*表格*/
.el-descriptions {
  margin-top: 2px;
}
.list{
  background-color: #9c6ccb;
  margin-top: 1px;
}
/* 涨跌幅样式 */
.price-increase {
  background-color: red;
  color: white;
}

.price-decrease {
  background-color: green;
  color: white;
}

</style>